<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
            <legend>费用设置</legend>
        </fieldset>
        <form class="layui-form layui-form-pane" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">费用类型</label>
                <div class="layui-input-inline">
                    <select id = "costType" name="costType" lay-filter="aihao">
                        <option value="" selected=""></option>
                        <option value="1">申购费用</option>
                        <option value="2">赎回费用</option>
                        <option value="3">管理费用</option>
                        <option value="4">托管费用</option>
                        <option value="5">服务费用</option>
                        <option value="6">其他费用</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item" pane="">
                <label class="layui-form-label" style="width: 150px;">是否阶梯收费</label>
                <div class="layui-input-block" style="padding-left: 50px;">
                    <input type="checkbox" checked  name="ladderCharge" value="1" lay-skin="switch" lay-text="开启|关闭"  lay-filter="switchTest" title="开关">
                </div>
            </div>
            <div>
                <div class="layui-form-item costRange">
                    <label class="layui-form-label" style="width: 150px;">区间收费标准</label>
                    <div class="layui-input-block">
                        <input type="radio" name="ladderUnit" lay-filter="ladder-radio"  value="1" title="天数">
                        <input type="radio" name="ladderUnit" lay-filter="ladder-radio"  value="2" title="万元">
                        <input type="radio" name="ladderUnit" lay-filter="ladder-radio" checked  value="0" title="">
                    </div>
                </div>
                <div class="layui-form-item costRange">
                    <label class="layui-form-label" style="width: 150px;">收费区间设置</label>
                    <div class="layui-input-inline">
                        <input type="text" id="lowerLimit" name="lowerLimit" readonly=”readonly” placeholder="下限" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-input-inline">
                        <select id="upperLimit" name="upperLimit" lay-filter="upper-select">
                        </select>
                    </div>
                </div>
                    
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">费用单位</label>
                <div class="layui-input-block">
                    <input type="radio" name="costUnit" value="1" title="百分占比">
                    <input type="radio" name="costUnit" value="2" title="万元">
                    <input type="radio" name="costUnit" value="-1" title="" >
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">费用数额</label>
                <div class="layui-input-inline">
                    <input type="text" name="amountOfExpense" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn" lay-submit="" lay-filter="demo2">提交</button>
            </div>
        </form>
    </div>
</div>

<script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../../js/jquery/jquery-2.1.4.js"></script>
<script src="../../js/common/constant.js"></script>
<script>
    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;
            var url = getRootPath();
            var financialProductId = getQueryVariable("financialProductId");
         //获取传递过来的参数
         function getQueryVariable(variable){
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i=0;i<vars.length;i++) {
                var pair = vars[i].split("=");
                if(pair[0] == variable){return pair[1];}
            }
            return(false);
        }
        //日期
        laydate.render({
            elem: '#date'
        });
        laydate.render({
            elem: '#date1'
        });
        

        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');

        //自定义验证规则
        form.verify({
            title: function (value) {
                if (value.length < 5) {
                    return '标题至少得5个字符啊';
                }
            }
            , pass: [
                /^[\S]{6,12}$/
                , '密码必须6到12位，且不能出现空格'
            ]
            , content: function (value) {
                layedit.sync(editIndex);
            }
        });
        //监听指定开关
        form.on('switch(switchTest)', function (data) {
            if(this.checked){
                $(".costRange").slideDown();
            }else{
                $(".costRange").slideUp();
            }

        });

        //监听提交
        form.on('submit(demo2)', function (data) {
            layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            })
            var field = data.field;
            $.ajax({
                type: "post",
                url: url+"/web/servercost/add",
                data: {
                    financialProductId:2,
                    costType: field.costType,
                    ladderCharge: field.ladderCharge,
                    ladderUnit: field.ladderUnit,
                    lowerLimit: field.lowerLimit,
                    upperLimit: field.upperLimit,
                    costUnit: field.costUnit,
                    amountOfExpense: field.amountOfExpense
                },
                success: function (response) {
                    var msg = response.message;
                    layer.open({
                        title:['确认消息'],
                        content: msg,
                        btn: ['确定'],
                        shadeClose: true,
                        yes: function(index, layero){
                            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.close(index); //再执行关闭
                            location.reload()
                        }
                    })
                }
            });
            return false;
        });

        form.on('radio(ladder-radio)', function(data){
            console.log(data.value); //被点击的radio的value值
            $.ajax({
                    type: "get",
                    url: url+"/web/section-amount/get",
                    data: {
                        financialProductId:2,
                        type:data.value,
                        costType:$("#costType").val(),

                    },
                    success: function (response) {
                        var data = response.data;
                        var str = '<option value="-1" selected="">请选择上限</option>';
                        $("#lowerLimit").val(data[0].sectionNumber);
                        if(data.length>1){
                            for(var i=1;i<data.length;i++){
                            var po= data[i];
                            str+='<option value="'+po.sectionNumber+'">'+po.sectionNumber+'</option>';
                            }
                            $("#upperLimit").html(str);
                        }else if(data.length===1){
                            var sop = '<option value="0" selected="">无线大</option>';
                            $("#upperLimit").html(sop);
                        }
                        form.render();
                    }
                });
            }); 
    });


</script>

</body>
</html>